<template>
  <div class="pigeonhole">
    <el-card style="margin:15px">
      <div class="historyTop">
        <div class="title">
          <span class="font">全公司</span>
          <div class="timeChange">
            <el-date-picker
              v-model="value"
              type="year"
              placeholder="选择年"
              size="small"
              format="yyyy"
              value-format="yyyy"
              @change="timeChange"
            />
          </div>
        </div>
      </div>
      <div
        v-for="security in securityListData"
        :key="security.id"
        class="historicalTable"
      >
        <statementTool
          :security-list-data="security"
        />
      </div>

    </el-card></div>
</template>

<script>
// 归档组件
import statementTool from './components/statementTool'
// 社保列表api
import { getSecurityList } from '@/api/social'
export default {
  components: {
    statementTool

  },
  data() {
    return {
      value: '2020',
      securityListData: []
    }
  },

  async created() {
    this.getSecurityList()
  },
  methods: {
    async getSecurityList() {
      const res = await getSecurityList(+this.value)
      //   console.log(res)
      this.securityListData = res
    },
    // 点击选择时间
    timeChange() {
      this.getSecurityList()
    //   console.log()
    //   console.log('2020')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep  .el-card__body{
        padding: 0;
    }
::v-deep .historyTop{

   .title{
    display: flex;
    height: 60px;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;

        .font{
            color:#409eff;
            font-size:20px;
            font-weight: 700;
            width: 126px;
            line-height: 60px;
            text-align: center;
            border-bottom: 2px solid #409eff;
            cursor: pointer;
            padding-bottom: 6px;
        }
        .timeChange{
            margin-top: 20px;
            margin-bottom: 5px;
            margin-right: 5px;
            height: 31px;
            display: flex;
            align-items: center;
        }
   }
}

::v-deep .el-card__body{
    position: relative;
    .time{
        display: inline-block;
        position: absolute;
        right: 5%;

    }
}

::v-deep .has-gutter th{
   background-color: #fafafa;
   border-bottom: 2px solid #e8e8e8;
 }
</style>
